<template>
	<div class="rememberOilEntry">
		<x-header title="记一笔加油" :left-options="{backText:''}" class="whiteHeader">
            <p slot="right" @click="goOilRecord" style="font-size:.3rem;color:#666;">加油记录</p>
        </x-header>
		<div class="contents">
			<div class="infos">
	            <!-- <div class="info1">
	                <span>车辆</span>
	                <input type="text" v-model.trim="carValue" placeholder="请选择车辆"  onfocus="this.blur()">
					<p></p>
	            </div> -->
				<group>
			       <popup-picker :title="title1" :data="allLicence" v-model="value1" @on-change="onChange(value1)"></popup-picker>
			     </group>
	            <div class="info1">
	                <span>里程</span>
	                <input type="text" v-model.trim="mileageValue" placeholder="请输入实时里程">
					<p style="visibility:hidden;"></p>
	            </div>
				<datetime v-model="dateValue" format="YYYY-MM-DD" placeholder="" >
	            <div class="info2">
	                <span>日期</span>
					<p>{{dateValue}}</p>
					<img src="../../assets/image/rightArrow.png" alt="">
	            </div>
				</datetime>
	            <div class="info1">
	                <span>加油金额</span>
	                <input type="text" v-model.trim="sumValue" placeholder="请输入本次加油金额">
					<p style="visibility:hidden;"></p>
	            </div>
	        </div>
			<div class="btn">
				<button @click="rememberOnce">记一笔</button>
			</div>
		</div>
	</div>

</template>
<script>
	/*记一笔加油入口*/
	import {setCookie,getCookie} from '../../util/commonUtils';
    import { XHeader,Datetime,Toast,PopupPicker,Group } from "vux"
	export default {
		name: "rememberOilEntry",
		// 数据
		data() {

			return {
				userId: '',
				allCar:'',//所有车辆
				allLicence:[],//所有车牌号
				carValue:'',//选中车牌号
				value1: [],//数组车牌号，组件要求
				mileageValue:'',//里程     可不填写
				dateValue:'',//日期
				sumValue:'',//金额
				show5:true,//是否显示弹窗
				title1: '车辆',//popup-picker标题
				once:true,//防止重复提交
			}
		},
		// 计算属性
		computed: {

		},
		// 创建（实例创建完成）
		created() {
			this.userId = getCookie('loginkey');
			if(localStorage.getItem('addCar')){
					this.carValue = JSON.parse(localStorage.getItem('addCar')).carName;
			}
			//获取用户所有车辆
		    this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
		        if(res.STATUS_CODE==1){
		          	this.allCar=res.CARS;
					let str = '';
					for(let i=0;i<this.allCar.length;i++){
						str += this.allCar[i].LICENCE + ',';
						if(this.allCar[i].IS_DEFAULT_CAR == 1){//默认车辆
							this.value1 = [this.allCar[i].LICENCE];
						}else{
							this.value1 = [this.allCar[0].LICENCE];//没有就取第一个车牌号
						}
					}
					str = str.substring(0,str.length-1);
					this.allLicence = [str.split(',')];
					//从我的跳转过来的
					if(localStorage.getItem('carNum')){
						this.value1 = [localStorage.getItem('carNum')];
						this.carValue = localStorage.getItem('carNum');
						return ;
					}
					this.value1 = [str.split(',')[0]];
					this.carValue = str.split(',')[0];
		        }
		    },err=>{
		      console.log(err);
		    })
		},
		// el被创建，并挂载到实例上
		mounted() {

		},
		// 方法（实例中的方法）-----------
		methods: {
			//选车牌
			onChange(val){
				this.carValue = val.join();
			},
			//记一笔
			rememberOnce(){
				if(this.userId == ''){
					this.$router.push('/login');
				}
				if(this.carValue == ''||this.carValue == null){
					this.$vux.alert.show({title:'提示',content:'请选择车辆!'});return;
				}
				if(this.mileageValue != '' && isNaN(this.mileageValue)){
					this.$vux.alert.show({title:'提示',content:'里程必须为数字!'});return;
				}
				if(this.dateValue == ''||this.dateValue == null){
					this.$vux.alert.show({title:'提示',content:'请选择日期!'});return;
				}
				if(this.sumValue == ''||this.sumValue == null){
					this.$vux.alert.show({title:'提示',content:'请填写加油金额!'});return;
				}
				if(isNaN(this.sumValue)){
					this.$vux.alert.show({title:'提示',content:'加油金额必须为数字!'});return;
				}
				let timestamp = Date.parse(new Date(this.dateValue));
				let obj = {};
				obj.USER_ID = this.userId;
				obj.CAR_NUMBER = this.carValue;
				obj.MILEAGE = this.mileageValue ? this.mileageValue : 0;//可以不填
				obj.PRICE = this.sumValue;
				obj.WRITE_TIME = timestamp;
				//防止重复提交
				if(this.once){
					this.once = false;
					this.$fetchPost('/FuelManager/setFuelManager',obj).then(
						res => {
	                		if(res.STATUS_CODE == 1){
								this.$vux.toast.show({text:'添加记录成功!'});
								setTimeout(()=>this.$router.push('/mine/'+this.carValue),500);
							}
						}, err => console.log(err)
					);
				}else{
					console.log('请勿多次提交');
				}

				// //测试打开这个
				// this.$fetchPost('/FuelManager/setFuelManager',obj).then(
				// 	res => {
				// 		if(res.STATUS_CODE == 1){
				// 			this.$vux.toast.show({text:'添加记录成功!'});
				// 		}
				// 	}, err => console.log(err)
				// );
			},
			//加油记录
			goOilRecord(){
				if(this.carValue == ''){
					return;
				}
				this.$router.push('/rememberOilRecord/'+this.carValue);
			},
		},
		// 子组件
		components: {
			XHeader,
			Datetime,
			Toast,
			PopupPicker,
			Group
		}
	}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
    .rememberOilEntry {
		.contents{
			width:7.2rem;
			height:6.6rem;
			background:#fff;
			margin:.2rem auto;
			.infos{
				height:4rem;
				width:7.2rem;
				background:#fff;
				.info1{
					width:100%;
					height:1rem;
					display:flex;
					align-items:center;
					.borderBFu(#e5e5e5);
					span{
						font-size:.3rem;
						color:#222;
						margin:0 .42rem 0 .3rem;
						white-space:nowrap;
					}
					input{
						border:0;
						width:5.5rem;
						font-size:.3rem;
						color:#222;
						height:.88rem;
						line-height:.88rem;//必须加这个属性,否则在手机上显示placeholder不完整
					}
					input::placeholder{
						font-size:.3rem;
						color:#888;
						height:.88rem;
					}
					p{
						width:.75rem;
						height:1rem;
						background:url('../../assets/image/rightArrow.png') no-repeat center center;
						background-size:.15rem .25rem;
					}
				}
				.info2{
					width:100%;
					height:1rem;
					display:flex;
					align-items:center;
					.borderBFu(#e5e5e5);
					position:relative;
					span{
						font-size:.3rem;
						color:#222;
						margin:0 .42rem 0 .3rem;
						white-space:nowrap;
					}
					p:nth-of-type(1){
						font-size:.3rem;
						color:#222;
					}
					img{
						position:absolute;
						top:50%;
						transform:translateY(-50%);
						right:.3rem;
						width:.15rem;
						height:.25rem;
					}
				}
			}
			.btn{
				display:flex;
				justify-content:center;
				margin-top:.95rem;
				button{
					border:0;
					width:2.8rem;
					height:.7rem;
					border-radius:.35rem;
					background:#F22E2E;
					font-size:.3rem;
					color:#fff;
					line-height:.7rem;
				}
			}
		}
    }
</style>
